<template>
  <view class="kd-my-evaluate-page">
    <view class="my-evaluate-row">
      <view class="head-text">我的星级：</view>
      <view class="rate-wrap">
        <uni-rate v-model="rateValue" @change="onChangeRateValue" readonly />
      </view>
    </view>

    <view class="user-evaluate-wrap"> 用户评价（{{ totalComment }}） </view>

    <scroll-view
      scroll-y
      class="user-evaluate-list"
      @scrolltolower="handleLoadMore"
      lower-threshold="70"
    >
      <view
        v-for="(item, index) in list"
        :key="index"
        class="user-evaluate-content"
      >
        <view class="left-user-info">
          <image :src="ftp + item.avatar" class="avatar"></image>
          <view class="user-name">{{ item.nickname }}</view>
        </view>

        <view class="evaluate-content">
          <view class="evaluate-text">{{ item.content }}</view>

          <view class="bottom-info">
            <view class="time">{{ item.comment_time }}</view>
            <view class="rate-wrap">
              <uni-rate :value="item.score" readonly />
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
const app = getApp();

export default {
  data() {
    return {
      ftp: app.globalData.ftp,
      id: "",
      rateValue: 0,
      pageIndex: 1,
      pageSize: 100000,
      loading: false,
      hasMoreData: false,
      isNullData: false,
      list: [],
      totalComment: 0,
      scrollHeight: 600,
    };
  },
  methods: {
    onChangeRateValue(e) {
      console.log(e);
      const { value } = e;

      this.rateValue = value;
    },
    handleGetList() {
      const { pageIndex, pageSize, id } = this;

      app
        .request(
          {
            page: pageIndex,
            limit: pageSize,
            express_id: id,
          },
          "/api/logistics/comment/com_list"
        )
        .then((res) => {
          const { code, data, msg } = res;

          if (code === 1) {
            let getList = data.data || [];
            let list = this.list;
            const { total } = data;

            const newList = list.concat(getList);
            let hasMoreData = true;
            let isNullData = false;

            if (getList.length < pageSize || !getList.length) {
              hasMoreData = false;
            }

            if (pageIndex === 1 && !getList.length) {
              isNullData = true;
            }

            this.hasMoreData = hasMoreData;
            this.isNullData = isNullData;
            this.list = newList;
            this.totalComment = total;
          } else {
            Toast(msg);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleLoadMore() {
      const { loading, pageIndex, hasMoreData } = this;

      if (loading === false && hasMoreData) {
        this.loading = true;
        this.isNullData = false;
        this.pageIndex = pageIndex + 1;
        this.handleGetList();
      }
    },
  },
  onLoad(res) {
    const { score, id } = res;

    this.id = id;
    this.rateValue = score;
    this.handleGetList();
  },
};
</script>

<style lang="scss">
.kd-my-evaluate-page {
  min-height: 100vh;
  background-color: #f2f2f2;
  .my-evaluate-row {
    width: 100%;
    height: 70rpx;
    padding: 0 22rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin-bottom: 18rpx;
    background-color: #fff;
    .head-text {
      color: #666;
      font-size: 24rpx;
    }
  }

  .user-evaluate-wrap {
    width: 100%;
    height: 70rpx;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    padding: 0 22rpx;
    box-sizing: border-box;
    color: #666666;
    background-color: #fff;
    border-bottom: 1rpx solid #f0f0f8;
  }

  .user-evaluate-list {
    background-color: #ffffff;
    .user-evaluate-content {
      width: 100%;
      padding: 18rpx 20rpx;
      box-sizing: border-box;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      border-bottom: 1rpx solid #f0f0f8;
      .left-user-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        .avatar {
          width: 60rpx;
          height: 60rpx;
          border-radius: 2rpx;
          margin-bottom: 8rpx;
        }
        .user-name {
          font-size: 24rpx;
          color: #666666;
        }
      }

      .evaluate-content {
        width: 626rpx;
        .evaluate-text {
          font-size: 24rpx;
          margin-bottom: 10rpx;
          color: #666666;
        }

        .bottom-info {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .time {
            font-size: 22rpx;
            color: #999999;
          }
        }
      }
    }
  }
}
</style>
